<template>
  <div>
    <div class="topSearch">
      <div>
        <el-link style="border: none" size="small" @click="_add"><i class="el-icon-plus"></i>添加</el-link>
        <el-link style="border: none;margin-left: 20px" size="small" @click="_delete"><i class="el-icon-delete"></i>删除
        </el-link>
      </div>
      <div>
        <el-input placeholder="按任务名称搜索" suffix-icon="el-icon-search" size="small" style="width: 250px"></el-input>
      </div>
    </div>
    <div class="centerBar" style="margin-top: 10px">
      <el-table :data="data"
                height="calc(100vh - 250px)"
                @selection-change="handleSelectionChange"
                :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
                :header-cell-style="{ 'background-color': '#eee', 'color': '#666', 'textAlign': 'center','font-size':'13px', }"
      >
        <el-table-column
            type="selection"
            width="55"/>
        <el-table-column label="任务名称" prop="inspectionTaskName"></el-table-column>
        <el-table-column label="任务有效期">
          <template v-slot:default="scope">
            <span>{{ scope.row.inspectionTaskStartTime }}-{{ scope.row.inspectionTaskEndTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="抓拍时间" prop="inspectionTaskTimeStr"></el-table-column>
        <el-table-column label="操作" width="250px">
          <template v-slot:default="scope">
            <el-switch v-model="scope.row.state"
                       active-value="0"
                       inactive-value="1"
                       @change="changeState(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="padding: 20px 0;" align="right" @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20, 30, 40, 50]"
                     layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "autoPic",
  data() {
    return {
      data: [],
      inspectionTaskIdList: [],
      pageNum: 1,
      currentPage: 1,
      total: 0,
      pageSize: 20,
    }
  },
  watch: {
    '$route.query': {
      handler(newQuery) {
        if (this.$route.path === '/autoPic') {
          this.fetchUser(newQuery)
        }
      },
      immediate: true
    }
  },
  methods: {
    fetchUser(){
      this.getList()
    },
    handleSelectionChange(val) {
      const inspectionTaskIdList = val.filter(i => i.inspectionTaskId != null).map(i => i.inspectionTaskId)
      this.inspectionTaskIdList = inspectionTaskIdList
    },
    getList() {
      const params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      this.$api.inspectionTaskGetInspectionTask(params).then(res => {
        this.data = res.data
        res.data.map(el => {
          el.state = el.state.toString()
        })
        this.total = res.total
      })
    },
    changeState(row) {
      const params = {
        inspectionTaskId: row.inspectionTaskId,
        state: row.state
      }
      this.$api.inspectionTaskDisable(params).then(res => {
        if (res == 1) {
          this.$message.success('修改成功！')
        }
      })
    },
    _delete() {
      if (this.inspectionTaskIdList.length == 0) return this.$message.warning('请勾选配置项！')
      const data = {inspectionTaskIds: this.inspectionTaskIdList}
      this.$api.inspectionTaskDeleteTask(data).then(res => {
        if (res == 1) {
          this.$message.success('删除成功！')
          this.getList()
        }
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.getList()
    },
    _add() {
      this.$router.push({
        path:'/addAutoPic',
        query:{
          state:'add'
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.topSearch {
  display: flex;
  justify-content: space-between;
}

/deep/ .el-switch.is-checked .el-switch__core {
  border-color: #303e9d;
  background-color: #303e9d;
}

@import "../../assets/css/public.css";
</style>